<template>
	<view>
		<view class="search-input" id="search-input">
			<!-- 填充 -->
			<view :style="`height:${app.globalData.sysInfo.STATUS_BAR_HEIGHT}px`"></view>
			<view style="display: flex;">
				<up-icon name="arrow-left" color="#DEDEDE" size="48rpx"
					@click="uni.navigateBack()"></up-icon>
				<up-search style="margin-left: 10rpx;" @click="toSearchPage()" shape="square"
					placeholder="首拼/名称/编号/条码" :clearabled="true" :showAction="false"
					bgColor="#4e77cf" searchIconColor="#dedede" placeholderColor="#DEDEDE"
					color="#ffffff" height="64rpx" disabled></up-search>
				<up-icon style="margin-left: 10rpx;" name="scan" color="#DEDEDE"
					size="54rpx"></up-icon>

			</view>
		</view>
		<!-- 填充 -->
		<view :style="{height:navBarHeight+'px'}"></view>
		<view class="category-view"
			:style="{height:app.globalData.sysInfo.SCREEN_HEIGHT - navBarHeight +'px'}">
			<scroll-view class="category-left" scroll-y>
				<view @click="clickBrand(index)" v-for="(item,index) in brandList"
					:class="index==selectLeftIndex?'category-left-item-select':''"
					class="category-left-item">
					<text>{{item.label}}</text>
				</view>
			</scroll-view>
			<scroll-view style="background-color: #ffffff;" class="category-right" scroll-y>
				<view style="padding: 20rpx;border-bottom: 1px solid #dcdfe6;"
					v-for="(item,index) in productList" @click="productClick(index)">
					<view style="font-weight: bold;">{{item.pname}}</view>
					<view style="color: #75747c;position: relative;">
						<text style="color: red;">库存：{{formartKC(item)}}</text>
						<text
							style="position: absolute;right: 0;">{{ item.bigunit?`￥${item.bigprice}\/${item.bigunit}`:`￥${item.smallprice}\/${item.smallunit}` }}</text>
					</view>
				</view>
			</scroll-view>
		</view>


		<!-- 0元赠弹出层 -->
		<popupProduct :show="popupShow" :productData="productList[selectRightIndex]"
			@close="popupClose" @confirm="handleConfigConfirm" :key="selectRightIndex+''+selectLeftIndex"></popupProduct>


	</view>
</template>

<script setup>
	import { ref, reactive, watch, computed, nextTick, getCurrentInstance } from 'vue'
	import { onReady, onLoad } from "@dcloudio/uni-app"
	const app = getApp()

	// data
	const whid = ref(-1) // 用户所选的仓库id
	const navBarHeight = ref(0)
	const selectRightIndex = ref(0) //当前商品索引
	const selectLeftIndex = ref(0) //当前品牌索引
	const productList = ref([]) //商品列表
	const brandList = ref([]) //品牌列表
	const popupShow = ref(false) //品牌列表

	onReady(() => {
		uni.createSelectorQuery().select('#search-input').boundingClientRect(s_data => {
			navBarHeight.value = s_data.height
		}).exec()
	})

	onLoad(async (param) => {
		const res = await app.globalData.http.get("/product/brand/dict")
		brandList.value = res.data
		whid.value = param.id
		if (brandList.value.length > 0) {
			clickBrand(0)
		}
	})
	
	
	const formartKC = (item)=>{
		if(item.bigunit) {
			return `${item.bigunitnum}${item.bigunit}${item.smallunitnum}${item.smallunit}`
		} else {
			return `${item.smallunitnum}${item.smallunit}`
		}
	}
	
	// 提交商品到购物车
	const handleConfigConfirm = async (configData) => {
		await nextTick();
		// 深拷贝
		const curProduct = uni.$u.deepClone(productList.value[selectRightIndex.value])
		const { selectedBusinessType, selectedUnit, quantity, unitPrice } = configData
		curProduct.selectedBusinessType = selectedBusinessType
		curProduct.selectedUnit = selectedUnit
		curProduct.quantity = quantity
		curProduct.unitPrice = unitPrice

		//上一页页面实例
		let pages = getCurrentPages()
		let prevPage = pages[pages.length - 2];
		prevPage._.exposed.addProduct(curProduct)
		uni.navigateBack()
	}
	// 点击品牌
	const clickBrand = async (index) => {
		selectLeftIndex.value = index
		const params = {
			brand: brandList.value[index].value,
			whid: whid.value
		}
		const res = await app.globalData.http.get(
			`/product/by-brand${app.globalData.queryParams(params, true, 'comma')}`)
		productList.value = res.data
	}
	// 点击商品
	const productClick = (index) => {
		selectRightIndex.value = index
		popupShow.value = true
	}

	const popupClose = (index) => {
		popupShow.value = false
	}

	const toSearchPage = (index) => {
		uni.navigateTo({
			url: '/pages/searchPage'
		})
	}
</script>

<style lang="scss" scoped>
	.search-input {
		background-color: #2757c5;
		width: auto;
		padding: 30rpx;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.category-view {
		display: flex;

		.category-left {
			height: 100%;
			width: 200rpx;
			display: flex;
			flex-direction: column;
			background-color: #f3f2f7;
			color: #888693;

			.category-left-item {
				line-height: 2.5;
				text-align: center;

			}

			.category-left-item-select {
				background-color: #ffffff;
				color: #000;
			}

			// .category-left-item:last-of-type {
			// 	padding-bottom: 30rpx !important;
			// }
		}

		.category-right {
			height: 100%;
			flex: 1;
			background-color: #f6f6f6;

		}
	}

	.bottom-box {
		background-color: #ffffff;
		// height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		border-top: 1px solid #dedede;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>